<template>
    <div class="dropdown">
        <a class="btn btn-outline-light my-2 dropdown-toggle" href="#" @click.prevent="toogleOpen">
            {{title}}
        </a>
        <ul class="dropdown-menu" :style="{display: 'block'}" v-if="isOpen">
            <slot/>
        </ul>
    </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue'
export default defineComponent({
    name: "Dropdown",
    props: {
        title: {
            type: String,
            required: true
        }
    },
    setup() {
        const isOpen = ref(false);
        const toogleOpen = () => {
            isOpen.value = !isOpen.value;
        }
        return {
            isOpen,
            toogleOpen,
        }
    }
})
</script>